<style lang="less">
	page{
		background: #f6f6f6;
	}
	.main{
		.main-top{
			display: flex;
			justify-content: space-between;
			background: #FFFFFF;
			padding:20upx 30upx;
			box-sizing: border-box;
			position: sticky;
			top: 0upx;
			left: 0;
			margin-top: 20upx;
			width: 100%;
			z-index: 100;
			.main-top-fr{
				.time{
					font-size:24upx;
					color:rgba(51,51,51,1);
					line-height:29upx;
					margin-right: 20upx;
				}
				.xuanze{
					width: 24upx;
					height: auto;
				}
			}
		}
	}
	.main-tab{
		margin-top: 20upx;
		position: sticky;
		top: 0upx;
		background: #FFFFFF;
		z-index: 100;
	}
	.tabs-title{
		background: #FFFFFF;
		padding: 20upx 30upx;
		border-top: 1px solid #ededed;
		position: sticky;
		top: 84upx;
		z-index: 99;
		border-bottom: 20upx solid #f6f6f6;
		view{
			font-size:24upx;
			color:rgba(153,153,153,1);
			line-height:29upx;
			text{
				font-size:36upx;
				font-family:'DINCond';
				font-weight:400;
				color:rgba(217,192,145,1);
				line-height:43upx;
				margin-left: 20upx;
			}
		}
		.zanwu{
			text-align: center;
		}
	}
	.content{
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
		margin-top: 20upx;
	}
	.tabs-main-for{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 0;
		border-bottom:1px solid #ededed;
		.tabs-main-for-fl{
			.dingdan{
				font-size:24upx;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:36upx;
			}
			.name{
				overflow: hidden;
				margin-top: 10upx;
				.img{
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
					float: left;
				}
				.userName{
					float: left;
					font-size:20upx;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:36upx;
					margin-left: 10upx;
				}
			}
		}
		.tabs-main-for-fr{
			.money{
				font-size:40upx;
				font-family:'DINCond';
				font-weight:400;
				color:rgba(233,50,70,1);
				line-height:48upx;
				text-align: right;
			}
			.time{
				font-size:20upx;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:36upx;
			}
		}
		
	}
	.tabs-main-for:last-child{
		border: none;
	}
	.select{
		   outline: none;
	}
	.select option{
			outline: none;
			display: inline-block;
			width: 100%;
	}
</style>
<template>
	<view class="main">
		<view class="main-top">
			<view class="main-top-fr">
				<text class="time" :class="{'active':index==tabIndex}" @tap="toggleTab(item,index)" v-for="(item,index) in tabList" :key="index">{{item.name}}</text>
				<image src="/static/img/arrowup_xia@2x.png" class="xuanze" mode="widthFix"></image>
			</view>
			<view class="main-top-fr">
				<select class="select" v-model="indexId" @change="getCouponSelected">
					<option v-for="(x,i) in shuju" v-bind:value="x.indexId">{{x.name}}</option>
				</select>
			</view>
		</view>
		<w-picker
			v-if="selectList.length!=0"
			mode="selector" 
			:defaultVal="[0]" 
			@confirm="onConfirm" 
			ref="selector" 
			themeColor="#f00"
			:selectList="selectList"
		></w-picker>
		<view class="content">
			<view class="tabs-main-for" v-for="(itme,i) in classList">
				<view class="tabs-main-for-fl">
					<view class="dingdan">订单号: {{itme.orderNo}}</view>
					<view class="name">
						<image v-if="itme.headIco!='' && itme.headIco!=null && itme.headIco!=undefined" :src= "'https://static.xpandago.net'+'/'+itme.headIco" class="img"></image>
						<image v-else src='https://static.xpandago.net/wechat/images/logo.png' class="img"></image>
						<view class="userName">{{itme.username}}</view>
					</view>
				</view>
				<view class="tabs-main-for-fr">
					<view class="money">{{itme.team}}</view>
					<view class="time">{{itme.createTime}}</view>
				</view>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				loadMoreText: "加载中...",
				showLoadMore: true,
				type:'',//时间选择传参
				token:'',
				classList:[],//循环数据
				current: 0,
				mode:"range",
				defaultVal:[0,0,0,0,0,0,0],
				tabList:[{
					mode:"selector",
					name:"请选择日期"
				}],
				selectList:[],
				tabIndex:0,
				resultInfo:{
					result:""
				},
				shuju:[
					{name:"全部",indexId: '-1'},
					{name:"增加",indexId: '0'},
					{name:"减少",indexId: '1'}
				],
				indexId:"-1",
				page:1,
				totalPage:0,
			}
		},
		onLoad() {
			this.token=uni.getStorageSync('token')
			this.typeList();
		},
		onReachBottom() {
			this.showLoadMore = true;
			if (this.page >= this.totalPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				setTimeout(() => {
					this.page++
					this.loadMoreText = "加载中..."
					this.teamOwn(this.page);
				}, 300);
			}
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.page=1;
			 this.classList = [];
			this.typeList();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			//业绩详情
			async teamOwn(page){
				const [err, res] = await api.teamOwn({
						query: {
							currentTime:this.type,
							buyOrQuit:this.indexId,
							page:page
						},
						header:{
							'Content-Type': 'application/json',
							'token': this.token
						}
					 });
				 if(res.data.code == 0){
					 this.classList = [...this.classList, ...res.data.data.list];
					 this.totalPage=res.data.data.totalPage
					 this.showLoadMore = false;
					  if(this.classList.length==0){
						 this.loadMoreText = "暂无数据!"
						 this.showLoadMore = true;
					 }else{
						this.showLoadMore = false; 
					 }
				 }else{
				 }
			},
			//业绩时间
			async typeList(){
				const [err, res] = await api.typeList({
						header:{
							'Content-Type': 'application/json',
							'token': this.token
						}
					 });
				 console.log(res.data)
				 if(res.data.code == 0){
					 this.selectList=res.data.data
					 if(this.selectList.length>0){
						 this.tabList[0].name=this.selectList[0].name
						 this.type=this.selectList[0].currentTime
						 this.teamOwn(this.page);
					 }
				 }else{
				 }
			},
			getCouponSelected(){
				this.page=1;
				this.classList = [];
				this.teamOwn(this.page)
			},
			//选择日期
			toggleTab(item,index){
				this.tabIndex=index;
				this.mode=item.mode;
				this.defaultVal=item.value;
				this.$refs[item.mode].show();
			},
			//组件选择返回的参数
			onConfirm(val){
				this.resultInfo=val;
				this.tabList[0].name=this.resultInfo.checkArr.name;
				this.type=val.checkArr.currentTime;
				this.page=1;
				this.classList = [];
				this.teamOwn(this.page);
			}
		}
	}
</script>
